<template>
  <el-drawer
    ref="eldrawer"
    :visible.sync="drawer"
    :with-header="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :wrapperClosable="false"
    class="add_porject_box"
    size="720px"
    @close="resetForm"
  >
    <div class="flexbox flexcolumn height_100">
      <div class="drawer__header flexbox flexcenter flexbetween">
        <span class="project_title">{{isEdit?'编辑项目':'添加项目'}}</span>
        <span class="icon_btn icon_btn_32" @click="resetForm"
          ><img src="@/assets/img/close_check.svg" alt=""
        /></span>
      </div>
      <div class="drawer__body">
        <div class="part_1">
          <div class="rules">添加产品</div>
          <div class="part_1_form" >
            <div class="part_1_form_item" v-for="(item,index) in dynamicForm" :key="index">
              <div class="part_1_form_item_title flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                <span style="font-size:14;font-weight:600">产品 {{index + 1}} </span>
                <span class="flexbox" style="font-size:12px;background:#F8F8F9;padding:2px 8px;color:#5C636C;border-radius:6px;margin-left:12px;height: 17px;" 
                v-if="item.product.brand_id&&
                      item.product.product_id&&
                      item.product.channel&&
                      item.product.business_scene"
                >唯一编号：{{item.product.brand_id}}_{{item.product.product_id}}_{{item.product.channel}}_{{item.product.business_scene}}</span>
                </div>
                <svg @click="removeForm(item)" style="cursor:pointer" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6 5.5L6.53333 2.5H13.4667L14 5.5" stroke="#B4B7BD" stroke-width="1.6" stroke-linejoin="round"/><path d="M3 5.5H17" stroke="#B4B7BD" stroke-width="1.68421" stroke-linecap="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 5.5L14.2308 17.5H5.76923L5 5.5H15Z" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 14H12" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round"/></svg>
              </div>
              <el-form
                :model="item.product"
                :ref="'product' + index"
                label-width="96px"
                label-position="left"
                hide-required-asterisk="true"
                class="dynamic"
              >
              <div class="flexbox flexcenter dualform">
               <el-form-item label="品牌产品"  prop="brand_id" :rules="{ required: true, message: '品牌不能为空', trigger:['change','blur']}">
                <el-select v-model="item.product.brand_id" filterable  placeholder="选择品牌" size="small" @change="item.product.product_id = ''">
                  <el-option :label="item.brand_name" :value="item.brand_id" v-for="item in bplist" :key="item.brand_id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item   prop="product_id" :rules="{ required: true, message: '产品不能为空', trigger: ['change','blur']}">
               <el-select v-model="item.product.product_id" filterable  placeholder="选择产品" size="small" :disabled="!item.product.brand_id" style="margin-left:12px;" >
                  <el-option :label="item.product_name" :value="item.product_id" v-for="item in filterBplist(item.product.brand_id)" :key="item.product_id"></el-option>
                </el-select>
              </el-form-item>
              </div>
              <el-form-item label="投放渠道" prop="channel" :rules="{ required: true, message: '渠道不能为空', trigger: ['change','blur']}">
                <el-select v-model="item.product.channel" placeholder="选择投放渠道" size="small" @change="item.product.channel != 1 && (item.product.business_scene = 5)">
                  <el-option label="千川" :value="1"></el-option>
                  <el-option label="UD" :value="2"></el-option>
                  <el-option label="巨量" :value="3"></el-option>
                  <el-option label="腾讯" :value="4"></el-option>
                  <el-option label="TK" :value="5"></el-option>
                  <el-option label="京易投" :value="6"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="业务场景"  prop="business_scene" :rules="{ required: true, message: '场景不能为空', trigger: 'blur'}">
                  <el-radio-group v-model="item.product.business_scene" size="mini">
                    <el-radio-button :class="{is_radio_show:item.product.channel != 1}" label="5">短视频</el-radio-button>
                    <el-radio-button label="6" v-if="item.product.channel == 1">直播</el-radio-button>
                  </el-radio-group>
              </el-form-item>
              </el-form>
            </div>
              <div class="add-form flexbox flexcenter" @click="addForm">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.8333 4.79183C10.8333 4.33159 10.4602 3.9585 9.99992 3.9585C9.53968 3.9585 9.16658 4.33159 9.16658 4.79183V9.16683H4.79159C4.33135 9.16683 3.95825 9.53993 3.95825 10.0002C3.95825 10.4604 4.33135 10.8335 4.79159 10.8335H9.16658V15.2085C9.16658 15.6687 9.53968 16.0418 9.99992 16.0418C10.4602 16.0418 10.8333 15.6687 10.8333 15.2085V10.8335H15.2083C15.6685 10.8335 16.0416 10.4604 16.0416 10.0002C16.0416 9.53993 15.6685 9.16683 15.2083 9.16683H10.8333V4.79183Z" fill="#5C636C"/></svg>
                添加
              </div>
          </div>
        </div>
        <div class="part_2">
          <div class="addUser-box flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
              <div class="btn_switch flexbox flexcenter">
                <div :class="table_qc_jc == 'qc' && 'btn_active'" @click="table_qc_jc = 'qc',changeTbale()">巨量千川&nbsp;·&nbsp;{{selectedRows_qc.length}}</div>
                <div :class="table_qc_jc == 'jc' && 'btn_active'" @click="table_qc_jc = 'jc',changeTbale()">巨量引擎&nbsp;·&nbsp;{{selectedRows_jc.length}}</div>
              </div>
              <span class="flexbox flexcenter" style="color:#5C636C;font-size:14px;margin-left:8px;gap:4px">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#ACB2BB" stroke-width="1.6" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#ACB2BB"/><path d="M10.1875 13.75V8.5H9.8125H9.4375" stroke="#ACB2BB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.875 13.75H11.5" stroke="#ACB2BB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                绑定项目中需要投放的账户
              </span>
            </div> 
            <div class="adduser_Btn flexbox flexcenter" @click="addUser">
              <!-- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.8334 4.79183C10.8334 4.33159 10.4603 3.9585 10 3.9585C9.5398 3.9585 9.16671 4.33159 9.16671 4.79183V9.16683H4.79171C4.33147 9.16683 3.95837 9.53993 3.95837 10.0002C3.95837 10.4604 4.33147 10.8335 4.79171 10.8335H9.16671V15.2085C9.16671 15.6687 9.5398 16.0418 10 16.0418C10.4603 16.0418 10.8334 15.6687 10.8334 15.2085V10.8335H15.2084C15.6686 10.8335 16.0417 10.4604 16.0417 10.0002C16.0417 9.53993 15.6686 9.16683 15.2084 9.16683H10.8334V4.79183Z" fill="#165DFF"/></svg> -->
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><g clip-path="url(#clip0_20682_36968)"><path d="M9 1.5L6.75 3.75H3.75V6.75L1.5 9L3.75 11.25V14.25H6.75L9 16.5L11.25 14.25H14.25V11.25L16.5 9L14.25 6.75V3.75H11.25L9 1.5Z" stroke="#165DFF" stroke-width="1.24925" stroke-linejoin="round"/><path d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z" stroke="#165DFF" stroke-width="1.24925" stroke-linejoin="round"/></g><defs><clipPath id="clip0_20682_36968"><rect width="18" height="18" fill="white"/></clipPath></defs></svg>
                账户设置
            </div>
          </div>
          <div>
            <custom-table :data="tableData" :isPage="false" key="drawerTable" height="400">
               <!-- <el-table-column type="selection" width="50"></el-table-column> -->
              <el-table-column  label="账户ID" width="314" prop="advertiser_id"></el-table-column>
              <el-table-column  label="账户名称" width="356" prop="advertiser_name"></el-table-column>
              <!-- <el-table-column  label="操作" ><template slot-scope="scope"><div @click="delTableRow(scope.$index)" style="color:#F53F3F;cursor:pointer">删除</div> </template></el-table-column> -->
            </custom-table>
          </div>
        </div>
        <div class="part_3">
            <div class="no_rules">项目人员设置</div>
            <div class="part_3_form">
               <el-form
                :model="proUserFrom"
                ref="prouserValidateForm"
                label-width="160px"
                label-position="left"
                class="dynamic"
              >
               <el-form-item label="执行人（可多选）" prop="executor" :rules="{ required: true, message: '执行人不能为空', trigger: ['change','blur']}">
                <el-select v-model="proUserFrom.executor" multiple collapse-tags filterable placeholder="请选择" @change="setSessionStorage" size="small">
                    <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="PM" prop="pm">
                 <el-select v-model="proUserFrom.pm"  placeholder="请选择" filterable  @change="setSessionStorage" size="small">
                    <el-option label="无" :value="null"></el-option>
                    <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="内容PM" prop="cpm" >
                <el-select v-model="proUserFrom.cpm" placeholder="请选择" filterable size="small">
                    <el-option label="无" :value="null"></el-option>
                    <el-option :label="item.nickname" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              </el-form>
            </div>
        </div>
        <div class="part_3">
            <div class="rules">项目等级</div>
            <div style="width:400px">
              <el-form :model="proUserFrom">
              <el-form-item prop="project_level" :rules="{ required: true, message: '项目等级不能为空', trigger: ['change','blur']}">
                <div class="flexbox">
                  <div 
                  v-for="(item,index) in 4" class="project_level" 
                  :key="item"
                  :class="{level_active:proUserFrom.project_level === index}" 
                  @click="proUserFrom.project_level = index"
                  >T{{index}}</div>
                </div>
              </el-form-item>
              </el-form>
            </div>
        </div>
        <div class="part_4">
          <div class="rules">项目名称设置</div>
          <div style="width:400px">
            <el-form ref="porjectNameForm" :model="proUserFrom">
            <el-form-item prop="porjectName" :rules="{ required: true, message: '项目名称不能为空', trigger: ['change','blur']}">
              <el-input v-model="proUserFrom.porjectName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            </el-form>
          </div>
      </div>
      </div>

      <div class="drawer__footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button
        style="background:#165DFF"
          type="primary"
          @click="saveProject"
          :loading="loading"
          >{{ loading ? "提交中 ..." : "保存" }}</el-button
        >
      </div>
    </div>
    <SumbitDialog
        class="savedialog"
        width="870px"
        :dialogVisible.sync="dialogVisible"
        sumbitColor="#165DFF"
        sumbitText="保存"
        @onSubmit="saveUser"
        @onClose="resetTable">
        <div slot="title">添加巨量{{table_qc_jc == 'qc'?'千川':'引擎'}}账号</div>
        <div v-loading="userloading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" class="flexbox flexcenter flexbetween">
          <div class="add_table_box">
            <div class="all_checkbox">
              <el-checkbox  v-model="is_coop" @change="selectAll(DialogtableData,'LeftCheck','is_coop')">未添加账户</el-checkbox>
            </div>
            <el-input size="small" clearable placeholder="请输入账户ID、账户名称进行搜索" suffix-icon="el-icon-search" v-model="searchQuery" style="padding: 12px;box-sizing: border-box;"></el-input>
            <div style="padding: 0 12px;height: 336px;overflow: auto;">
              <div v-for="item in filteredDataFn(DialogtableData,searchQuery)"  :key="item.advertiser_id" class="flexbox flexcenter" style="height: 44px;padding: 12px 0;border-bottom: 1px solid #F1F2F3;">
                  <el-checkbox v-model="item.checked" @change="selectCheck(DialogtableData,'LeftCheck','is_coop')"></el-checkbox>
                  <div style="margin-left:12px">
                    <p style="line-height: 20px;color:#191B1E">{{item.advertiser_name}} </p>
                    <p style="line-height: 20px;color:#ACB2BB">ID: {{item.advertiser_id}} </p>
                  </div>
              </div>
            </div>
          </div>
          <div>
            <div @click="toChange(DialogtableData,'LeftCheck','addAccount')" class="addbtn" style="height: 20px;padding: 12px;border: 1px solid #E8EAEC;border-radius: 12px;color: #191B1E;cursor: pointer;margin-bottom:12px">
              添加 <span style="color:#165DFF">{{LeftCheck.length }}</span> 个账户
              <svg style="margin-left: 9px;" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
                <path d="M8.57146 10.2856L12.8572 5.99993L8.57146 1.71422" stroke="#5C636C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12.8572 6L1.71432 6" stroke="#5C636C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div @click="toChange(addAccount,'RightCheck','DialogtableData')" :class="{'Disable_hover': !addAccount.some(check => check.checked) }"  style="height: 20px;padding: 12px;border: 1px solid #E8EAEC;border-radius: 12px;color: #191B1E;cursor: pointer;">
              <svg style="margin-right: 9px;" xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
                <path d="M5.85713 10.2856L1.57141 5.99993L5.85713 1.71422" stroke="#5C636C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12.8572 6L1.71432 6" stroke="#5C636C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              移除 <span style="color:#F53F3F">{{ RightCheck.length }}</span> 个账户</div>
          </div>
          <div class="add_table_box">
            <div class="all_checkbox">
              <el-checkbox  v-model="is_self" @change="selectAll(addAccount,'RightCheck','is_self')">已添加账户</el-checkbox>
            </div>
            <el-input size="small" clearable placeholder="请输入账户ID、账户名称进行搜索" suffix-icon="el-icon-search" v-model="searchQueryDel" style="padding: 12px;box-sizing: border-box;"></el-input>
            <div style="padding: 0 12px;height: 336px;overflow: auto;">
              <template v-if="addAccount.length>0">
                <div v-for="item in filteredDataFn(addAccount,searchQueryDel)"  :key="item.advertiser_id" class="flexbox flexcenter" style="height: 44px;padding: 12px 0;border-bottom: 1px solid #F1F2F3;">
                    <el-checkbox v-model="item.checked" @change="selectCheck(addAccount,'RightCheck','is_self')"></el-checkbox>
                    <div style="margin-left:12px">
                      <p style="line-height: 20px;color:#191B1E">{{item.advertiser_name}} </p>
                      <p style="line-height: 20px;color:#ACB2BB">ID: {{item.advertiser_id}} </p>
                    </div>
                </div>
              </template>
            </div>
          </div>
        </div>
    </SumbitDialog>
    <!-- <SumbitDialog
        class="savedialog"
        width="573px"
        :dialogVisible.sync="dialogVisible"
        sumbitColor="#165DFF"
        sumbitText="添加"
        @onSubmit="saveUser"
        @onClose="resetTable">
        <div slot="title">添加账号</div>
        <el-input placeholder="请输入账户ID、账户名称进行搜索" v-model="searchQuery" @input="searchData"  style="margin:16px 0 12px"></el-input>
        <div v-loading="userloading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <custom-table :data="filteredData"  ref="userList" :isPage="false" key="DialogTable"  height="400"  @select="handleSelectionChange" @select-all="handleSelectionChangeAll">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column  label="账户ID" width="213" prop="advertiser_id"></el-table-column>
              <el-table-column  label="账户名称" width="268" prop="advertiser_name"></el-table-column>
        </custom-table>
        </div>
    </SumbitDialog> -->
  </el-drawer>
</template>

<script>
import CustomTable from '@/components/components/CustomTable';
import SumbitDialog from "@/components/components/SumbitDialog"
export default {
  props: ["drawer","EditData","isEdit"],
  data() {
    return {
      LeftCheck:[],
      RightCheck:[],
      is_coop:false,
      is_self:false,

      addAccount:[],
      table_qc_jc:"qc",
      searchQuery:"",
      searchQueryDel:"",
      loading:false,
      userloading:false,
      dialogVisible:false,
      DialogtableData:[],
      DialogtableRightData:[],
      filteredData: [],
      bplist:[],
      tableData:[],
      selectedRows_qc:[],
      // inside_selectedRows_qc:[],
      selectedRows_jc:[],
      // inside_selectedRows_jc:[],
      optimiList:[],
      roleList:[],
      //人员设置表单
      proUserFrom:{
        project_level:undefined,
        executor: [],
        pm: '',
        cpm: '',
        porjectName:""
      },
      //添加产品表单
      dynamicForm: [{
        product:{
          brand_id:"",
          product_id:"",
          channel:"",
          business_scene:"5"//默认选中
        }
      }]
    };
  },
  watch: {
    EditData(nVal,oldVal){
      let newVal = JSON.parse(JSON.stringify(nVal))
      this.proUserFrom.executor = newVal.executor;
      this.proUserFrom.pm = newVal.pm;
      this.proUserFrom.cpm = newVal.cpm;
      this.proUserFrom.porjectName = newVal.project_name;
      this.proUserFrom.project_level = newVal.project_level;
      this.dynamicForm = [];
      newVal.product.forEach(e=>{
        if(e.business_scene == 6 && e.channel == 1){
          this.dynamicForm.push({product:e})
        }else{
          this.dynamicForm.push({product:{...e,business_scene:"5"}})
        }
      })
      if(newVal.advertiser_qc.length > 0){
        this.selectedRows_qc = newVal.advertiser_qc;
        this.tableData = newVal.advertiser_qc;
      }
      if(newVal.advertiser_jc.length > 0){
        this.selectedRows_jc = newVal.advertiser_jc;
      }

    },
    // DialogtableData(newVal) {
    //   this.filteredData = newVal; // 初始时，将原始数据赋值给 filteredData  
    // },
  },
  mounted(){
    this.getBplist();
    this.advertiserList();
    this.getOptimization();
    this.getRoleList();
  },
  
  methods: {
       selectCheck(list,has,all) {
            let arr = list.filter((item) => {
                return item.checked;
            });
            this[has] = arr;
            // this[all] = list.every((item) => item.checked);
        },
      // 筛选
        filteredDataFn(list, query) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (
                    item.advertiser_name.indexOf(query) !== -1 ||
                    item.advertiser_id == query
                ) {
                    return item;
                }
            });
            return list;
        },
        selectAll(list,has,all) {
            let arr = [];
            list.map((item) => {
                item.checked = this[all];
            });
            if (this[all]) {
                arr = list;
            } else {
                arr = [];
            }
            this[has] = arr;
        },

        toChange(list,has,list2) {
            if (this[has].length > 0) {
                let hasCheck = JSON.parse(JSON.stringify(this[has]));
                hasCheck.map((item) => {
                    item.checked = false;
                });
                for (let i in list) {
                    for (let a in hasCheck) {
                        if (
                            list[i].advertiser_id ==
                            hasCheck[a].advertiser_id
                        ) {
                            list.splice(i, 1);
                        }
                    }
                }
                this[list2] = this[list2].concat(hasCheck);
                this[has] = []
                this.is_coop = false;
                this.is_self = false;
            }
        },



    //  新-添加账户
    // addAccountFn(){
    //   if(this.filteredData.filter(e=>e.checked).length == 0)return;
    //   this.DialogtableRightData = this.filteredData.filter(e=>e.checked);
    //   this.addAccount.push(...this.filteredData.filter(e=>e.checked));
    //   this.filteredData = this.filteredData.filter(e=> !e.checked);
    // },
    // //  新-移除账户
    // delAccountFn(){
    //   console.log(this.addAccount)
    //   if(this.addAccount.filter(e=>e.checked).length == 0)return;
    //   this.DialogtableRightData = this.addAccount.filter(e=>!e.checked);
    //   this.filteredData.unshift(...this.addAccount.filter(e=>e.checked));
    //   this.addAccount = this.addAccount.filter(e=> !e.checked);
    // },
    //保存项目
    saveProject(){
      //校验 添加产品
      let currValid;
      for (let i = 0; i < this.dynamicForm.length; i++) {
        this.$refs['product' + i][0].validate((valid) => currValid = valid);
         if(!currValid)return;
      }

      //校验项目人员设置
      let prouserValid;
      this.$refs.prouserValidateForm.validate((valid) => prouserValid = valid);
      if(!prouserValid)return;
      
      //校验项目等级
     let  isNotNullOrUndefinedOrFalsyButAllowZero = (value) => {  
          return value !== null && value !== undefined && !(value === false || value === "");  
      }  
      if(!isNotNullOrUndefinedOrFalsyButAllowZero(this.proUserFrom.project_level)){
       return this.$message.error('请选择项目等级！')
      }
      
      this.$refs.porjectNameForm.validate(async (valid) => {
        if(valid){
          this.loading = true;
          let url = this.isEdit ? "adminapi/projectv2/projectEdit" : "adminapi/projectv2/projectAdd";
          const { data: res } = await this.$http.post( url, {
            project_level:this.proUserFrom.project_level,
            project_name: this.proUserFrom.porjectName,
            product: this.dynamicForm.map(e=> e.product),
            advertiser_qc: this.selectedRows_qc.map(e=>e.advertiser_id),
            advertiser_jc: this.selectedRows_jc.map(e=>e.advertiser_id),
            executor: this.proUserFrom.executor,
            pm: this.proUserFrom.pm,
            cpm: this.proUserFrom.cpm,
            project_id: this.isEdit? this.EditData.project_id : undefined,
          });

          if (res.code !== 200) {
            this.loading = false;
            return this.$message.error(res.msg);
          } else {
            this.loading = false;
            this.resetForm();
            this.$parent.getDataList()
            this.$message.success('保存成功');
          }
        }
      });
    },
    saveTable(){
      if(this.table_qc_jc == 'qc'){
        console.log( this.addAccount)
        // if(this.tableData.length>0){
        //  let filetArr = this.tableData.map(e=>e.advertiser_id);
          //  this.addAccount.forEach(es=>{
          //     if(!filetArr.includes(es.advertiser_id)){
          //       this.tableData.push(es)
          //     }
          //  })
          // this.selectedRows_qc.forEach(es=>{
          //     if(!filetArr.includes(es.advertiser_id)){
          //       this.tableData.push(es)
          //     }
          //  })
          // this.tableData = JSON.parse(JSON.stringify(this.addAccount))
        // }else{
          this.tableData = JSON.parse(JSON.stringify(this.addAccount))
          // this.tableData = JSON.parse(JSON.stringify(this.selectedRows_qc))
        // }
        this.selectedRows_qc = JSON.parse(JSON.stringify(this.tableData))
        // this.inside_selectedRows_qc = [];
      }else{
        //  if(this.tableData.length>0){
        //   let filetArr = this.tableData.map(e=>e.advertiser_id);
        //   // this.selectedRows_jc.forEach(es=>{
        //   //     if(!filetArr.includes(es.advertiser_id)){
        //   //       this.tableData.push(es)
        //   //     }
        //   //  })
        //   this.addAccount.forEach(es=>{
        //       if(!filetArr.includes(es.advertiser_id)){
        //         this.tableData.push(es)
        //       }
        //    })
        // }else{
          this.tableData = JSON.parse(JSON.stringify(this.addAccount))
        // }
        this.selectedRows_jc = JSON.parse(JSON.stringify(this.tableData))
      }
    },
    changeTbale(){
      if(this.table_qc_jc == 'qc'){
          this.tableData = JSON.parse(JSON.stringify(this.selectedRows_qc))
      }else{
          this.tableData = JSON.parse(JSON.stringify(this.selectedRows_jc))
      }
    },

    //账户列表 - 删除
    // delTableRow(index){
    //   this.tableData.splice(index,1)
    //   if(this.table_qc_jc == 'qc'){
    //     this.selectedRows_qc.splice(index,1) 
    //   }else{
    //     this.selectedRows_jc.splice(index,1) 
    //   }
      
    // },
    // handleSelectionChangeAll(selection){
    //   if(this.table_qc_jc == 'jc'){
    //     this.inside_selectedRows_jc = selection;
    //     this.selectedRows_jc = selection; // 更新选中行数组
    //   }else{
    //     this.inside_selectedRows_qc = selection;
    //     this.selectedRows_qc = selection; // 更新选中行数组
    //   }
    // },
    //账户列表-选中数据
    // handleSelectionChange(selection,row) {
    //   if(this.table_qc_jc == 'jc'){
    //     this.selectedRows_jc = selection; // 更新选中行数组
        
    //     if(this.inside_selectedRows_jc.length>0){
    //      this.inside_selectedRows_jc = this.inside_selectedRows_jc.filter(ee => ee.advertiser_id != row.advertiser_id)
    //     }

    //     this.inside_selectedRows_jc.push(...selection)
    //     const seenIds = new Set();
    //     const uniqueData =  this.inside_selectedRows_jc.filter(item => {  
    //         if (!seenIds.has(item.advertiser_id)) {  
    //             seenIds.add(item.advertiser_id);  
    //             return true; // 保留这个对象  
    //         }  
    //         return false; // 移除这个对象  
    //     });
    //     this.inside_selectedRows_jc = uniqueData;
    //   }else{
    //     this.selectedRows_qc = selection; // 更新选中行数组

    //     if(this.inside_selectedRows_qc.length>0){
    //      this.inside_selectedRows_qc = this.inside_selectedRows_qc.filter(ee => ee.advertiser_id != row.advertiser_id)
    //     }

    //     this.inside_selectedRows_qc.push(...selection)
    //     const seenIds = new Set();
    //     const uniqueData =  this.inside_selectedRows_qc.filter(item => {
    //         if (!seenIds.has(item.advertiser_id)) {
    //             seenIds.add(item.advertiser_id);
    //             return true; // 保留这个对象
    //         }
    //         return false; // 移除这个对象
    //     });
    //     this.inside_selectedRows_qc = uniqueData;
    //   }
    // },

    //账户列表 - 保存
    saveUser(){
      // this.selectedRows_qc = this.inside_selectedRows_qc;
      // this.selectedRows_jc = this.inside_selectedRows_jc;
      this.saveTable()
      this.dialogVisible = false;
    },

    //账户列表-打开获取账户列表
    addUser(){
      this.searchQueryDel = "";
      this.searchQuery = "";
      this.advertiserList()
      this.dialogVisible = true;
    },
    
    //账户列表-关闭重置
    resetTable(){
      // this.DialogtableData.forEach(e=>{
      //     e.checked = false
      // })
      // this.LeftCheck = [];
      // this.RightCheck = [];
    

      if(this.table_qc_jc == 'jc'){
        if(this.selectedRows_jc.length == 0){
          this.addAccount = [];
        }else{
          this.addAccount = JSON.parse(JSON.stringify(this.tableData));
        }
        this.selectedRows_jc = JSON.parse(JSON.stringify(this.tableData)); // 更新选中行数组
      }else{
        if(this.addAccount.length == 0){
          this.addAccount = [];
        }else{
          this.addAccount = JSON.parse(JSON.stringify(this.tableData));
        }
        this.selectedRows_qc = JSON.parse(JSON.stringify(this.tableData)); // 更新选中行数组
      }
      
      // this.inside_selectedRows_jc = [];
      // this.inside_selectedRows_qc = [];
      // this.DialogtableData = [];
    },

    //添加账户 - 移除
    removeForm(item) {
      let index = this.dynamicForm.indexOf(item)
      if (index !== -1) {
        this.dynamicForm.splice(index, 1)
      }
    },
    // searchDelData() {  
    //     const lowerCaseQuery = this.searchQueryDel.toLowerCase(); 
    //     console.log(lowerCaseQuery,this.DialogtableRightData) 
    //     this.addAccount = this.DialogtableRightData.filter(item => {
    //       return (
    //         item.advertiser_id.toString().includes(lowerCaseQuery) ||  
    //         item.advertiser_name.toLowerCase().includes(lowerCaseQuery)  
    //       );
    //     });
    //   },
    //添加账户-本地搜索
    // searchData() {  
    //   const lowerCaseQuery = this.searchQuery.toLowerCase();  
    //   this.filteredData = this.DialogtableData.filter(item => {
    //     return (
    //       item.advertiser_id.toString().includes(lowerCaseQuery) ||  
    //       item.advertiser_name.toLowerCase().includes(lowerCaseQuery)  
    //     );
    //   });
    //   // 因为赋值会清空勾选 需要重新勾选上
    //   // this.$nextTick(()=>{
    //   //   let inside_selectedRows_jc_arr = this.inside_selectedRows_jc.map(e=>e.advertiser_id)
    //   //   let inside_selectedRows_qc_arr = this.inside_selectedRows_qc.map(e=>e.advertiser_id)
    //   //   this.filteredData.forEach(row=>{
    //   //     if(this.table_qc_jc == 'jc'){
    //   //       if(inside_selectedRows_jc_arr.includes(row.advertiser_id)){
    //   //         this.$refs.userList.$refs.table.toggleRowSelection(row,true);
    //   //       }
    //   //     }else{
    //   //        if(inside_selectedRows_qc_arr.includes(row.advertiser_id)){
    //   //         this.$refs.userList.$refs.table.toggleRowSelection(row,true);
    //   //       }
    //   //     }
    //   //   })
    //   // })
    // },

    //添加产品-添加
    addForm(){
      this.dynamicForm.push({
        product:{
            brand_id:"",
            product_id:"",
            channel:"",
            business_scene:"5"
          }
      })
    },

    //添加产品-品牌产品-产品选择器需要根据品牌取出数据
    filterBplist(id){
        if(!id)return;
        let arr =  this.bplist.find((e)=> e.brand_id == id)
        if(!arr)return;
        return arr.product;
    },

    //获取员工列表
    async getRoleList() {
        const { data: res } = await this.$http.post(
            "adminapi/company/findDEPList",
            {
                query: "",
            }
        );
        if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
        } else {
            this.roleList = res.data;
        }
      },

    // 获取优化师列表
    async getOptimization() {
        const { data: res } = await this.$http.post(
            "adminapi/company/szOptimizerList"
        );
        if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
        } else {
            this.optimiList = res.data;
        }
    },
    
    //获取品牌列表
    async getBplist(){
      const { data: res } = await this.$http.post("adminapi/brandv2/bpList",{limit:0});
      if (res.code !== 200) {
       return this.$message.error(res.msg);
      } else {
        this.bplist = res.data.list;
      }
    },

    //获取账户列表
    async advertiserList(){
      this.userloading = true;
      const { data: res } = await this.$http.get("adminapi/projectv2/advertiserList",{params:{
        type:this.table_qc_jc,//千川qc，巨量jc
        page:1,
        limit:9999
      }});
      if (res.code !== 200) {
        this.userloading = false;
       return this.$message.error(res.msg);
      } else {
        this.LeftCheck = [];
        this.RightCheck = [];
        this.is_self = false;
        this.is_coop = false;
        if(this.table_qc_jc == 'jc'){

          this.addAccount = this.selectedRows_jc;
          this.addAccount.map(e=>e.checked = false)

            let id = this.selectedRows_jc.map(e=>e.advertiser_id)
            this.DialogtableData = res.data.list.map(e=>{
              if(id.length > 0){
                if(!id.includes(e.advertiser_id)){
                  return {...e,checked:false}
                }
              }else{
                return {...e,checked:false}
              }
             }).filter(e=>e)
        }else{

          this.addAccount = this.selectedRows_qc;
          this.addAccount.map(e=>e.checked = false)

          let id = this.selectedRows_qc.map(e=>e.advertiser_id)
            this.DialogtableData = res.data.list.map(e=>{
              if(id.length > 0){
                if(!id.includes(e.advertiser_id)){
                  return {...e,checked:false}
                }
              }else{
                return {...e,checked:false}
              }
             }).filter(e=>e)
        }
        this.userloading = false;
        // this.DialogtableData = res.data.list;
        // setTimeout(()=>{
          // let seleId = this.tableData.map((e)=>e.advertiser_id)
          //  this.DialogtableData.forEach(row => {
            //  if(seleId.includes(row.advertiser_id)){
              //  this.$refs.userList.$refs.table.toggleRowSelection(row,true);
            //  }
          //  });
        // })
      }
    },

    //抽屉-关闭清空数据
    resetForm() {
      this.table_qc_jc = "qc";
      for (let i = 0; i < this.dynamicForm.length; i++) {
        this.$refs['product' + i][0].resetFields();
      }
      this.dynamicForm = [{product:{
            brand_id:"",
            product_id:"",
            channel:"",
            business_scene:"5"
      }}];
      this.selectedRows_jc = [];
      this.selectedRows_qc = [];
      this.tableData = [];
      this.proUserFrom.project_level = undefined;
      this.$refs.prouserValidateForm.resetFields();
      this.$refs.porjectNameForm.resetFields();
      this.$emit("update:drawer", false);
    },
  },
  components:{
    CustomTable,
    SumbitDialog
  }
};
</script>

<style scoped>
.savedialog >>> .promptDialog .el-dialog__footer{
  padding: 20px !important;
}
.savedialog >>> .promptDialog .el-dialog__body{
  padding: 20px !important;
}
.savedialog >>> .promptDialog .el-dialog__header{
  padding: 20px 20px 0px !important;
}
.savedialog >>> .promptDialog .el-input__suffix{
  right: 12px !important;
}
/deep/ .el-form-item{
  margin-bottom: 12px;
}
/deep/ .el-form-item:last-child{
  margin-bottom: 0;
}
/deep/ .el-input__inner{
  border-radius: 8px;
}
/deep/ .el-form-item__label{
  color:#5C636C;
}
/deep/ .el-radio-button__inner{
      min-width: 70px;
}
/deep/ .el-radio-button:last-child .el-radio-button__inner{
    border-radius: 0 6px 6px 0;
}
/deep/ .el-radio-button:first-child .el-radio-button__inner{
    border-radius: 6px 0 0 6px;
}
 /deep/ .is_radio_show .el-radio-button__inner{
  border-radius: 6px !important;
}
.dualform >>> .el-form-item:last-child{
  margin-bottom: 12px;
}
.dualform >>> .el-form-item:last-child .el-form-item__content{
  margin-left: 0px !important;
}

.drawer__header {
  border-bottom: 1px solid #ebebeb;
  padding: 20px;
  line-height: 32px;
}
.drawer__body{
  height: calc(100vh - 181px);
  /* height: 1098px; */
  /* height: calc(100% - 368px); */
  overflow: auto;
  padding: 20px;
}
.project_title {
  color: #191b1e;
  font-size: 18px;
  font-weight: 500;
}
.rules,.no_rules{
  margin-bottom: 12px;
}
.rules::after{
  content: "*";
  color: #F53F3F;
  margin-left: 4px;
  /* font-weight: 500;   */
}
.part_1_form{
  background: #F8F8F9;
  border-radius: 12px;
  padding: 12px;
}
.part_1_form_item{
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 20px;
  background: #FFFFFF;
}
.part_1_form_item_title{
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #F8F8F9;
}
.add-form{
  background: #FFFFFF;
  border-radius: 12px;
  color: #5C636C;
  cursor: pointer;
  font-size: 14px;
  margin-top: 12px;
  line-height: 36px;
  justify-content: center;
}
.addUser-box{
  margin: 20px 0 12px;
}
.adduser_Btn{
  cursor: pointer;
  border: 1px solid #165DFF;
  border-radius: 12px;
  color: #165DFF;
  font-size: 14px;
  padding: 0 8px;
  line-height: 32px;
  gap: 4px;
}
.part_2,.part_3{
  margin-bottom: 20px;
}
.part_3_form{
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #E8EAEC;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}   
.drawer__footer{
    text-align: right;
    line-height: 68px;
    padding: 0 20px;
}
.btn_switch{
    line-height: 36px;
    background: #F8F8F9;
    padding: 5px;
    border-radius: 12px;
    color: #5C636C;
    font-size: 14px;
    gap:4px;
    text-align: center;
}
.btn_switch div{
    width: 98px;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
}
.btn_active{
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  background: #FFFFFF;
  color: #191B1E;
}
.project_level{
  width: 71.5px;
  height: 19px;
  border-radius: 8px;
  padding: 6px 8px;
  background: #F8F8F9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5C636C;
  cursor: pointer;
  letter-spacing: 1px;
  font-weight: 600;
  margin-right: 12px;
}
.level_active{
  outline: 1px solid #165DFF;
  color: #165DFF;
}

.add_table_box{
    width: 334px;
    border-radius: 8px;
    border: 1px solid #E8EAEC;
    overflow: hidden;
}
.all_checkbox{
    height: 22px;
    padding: 12px;
    background: #F8F8F9;
    font-size: 16px;
    color: #191B1E;
}
.Disable_hover{
  opacity: 0.5;
  cursor: not-allowed !important;
}
.addbtn:hover{
  background: #F8F8F9;
}
</style>